<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .toggle>div {
            float: left;
            width: fit-content;
            height: fit-content;
            margin: 10px;
            border: 1px solid #00B7FF;
        }
        div.a {
            background: #80a5ff;
        }
        div.b {
            background: #ffe5ba;
        }
        div.c {
            background: #9dff92;
        }
    </style>
</head>
<body>
<div class="buttons">
    <button>toggle</button>
    <button class="a">toggle a</button>
    <button class="a b">toggle a b</button>
    <button class="a b c">toggle a b c</button>
    <a href="#">reset</a>
</div>
<div class="toggle">
    <div></div>
    <div class="b"></div>
    <div class="a b"></div>
    <div class="a c"></div>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 存储初始div的class
        var itClass = ['', 'a', 'a b', 'a b c'];
        var divs = $(".toggle").children();
        // 将当前的class值添加到当前对象内部
        var toggleClass = function () {
            divs.append(function () {
                console.log(this.className);
                // this.className || "none"记得加上括号，运算符优先级
                return "<div>" + (this.className || "none") + "</div>";
            });
        };
        toggleClass();
        $("button").bind("click", function () {
            var buttonClass = this.className || undefined;
            console.log(buttonClass);
            // 将点击的button的class值 添加/删除 到div中
            divs.toggleClass(buttonClass);
            toggleClass();
        });
        // 重置
        $("a").bind("click", function (event) {
            event.preventDefault();
            divs.empty().each(function (index) {
                this.className = itClass[index];
            });
            toggleClass();
        })
    })

</script>
</body>
</html>